<template>
  <div class="box" v-loading="isLoading">
    <!-- 头像 -->
    <!-- <div class="flex justify-center">
      <div class="square-container">
        <el-avatar class="square-image" :src="userInfo.avatar"> </el-avatar>
      </div>
    </div> -->


    <div class="square-container">
      <!-- 头像 -->
    <vue-hover-mask class="center">
      <el-upload :http-request="uploadImage" action="" :show-file-list="false" :limit="1" :on-exceed="handleExceed"
        ref="userAvatar">
        <el-avatar class="square-image" :src="userInfo.avatar"> </el-avatar>
      </el-upload>
      <template v-slot:action>
        <span slot="default" @click="editAvatar">编辑</span>
      </template>
    </vue-hover-mask>
    </div>



    <p>&nbsp;</p>

    <!-- 第一行 -->
    <div class="flex">
      <div class="left-item">
        <el-form ref="userInfo" :model="userInfo" class="register-container" :rules="saveRules">
          <div class="label">昵称</div>
          <div>
            <el-form-item prop="nickname">
              <el-input v-model="userInfo.nickname" class="custom-input"></el-input>
            </el-form-item>

          </div>
        </el-form>
      </div>
      <div class="right-item">
        <div class="label">性别</div>
        <div class="flex gender">
          <button style="margin-right: 12px" @click="change(isMan), genderMan()" :class="{ active1: isMan }">
            男
          </button>
          <button @click="change(!isMan), genderWoman()" :class="{ active2: !isMan }">
            女
          </button>
        </div>
      </div>
    </div>

    <!-- 第二行 -->
    <div class="flex">
      <div class="left-item">
        <div class="label">邮箱</div>
        <div>
          <el-input v-model="userInfo.email" :disabled="true" class="NotInput"></el-input>
        </div>
      </div>
      <div class="right-item">
        <div class="label">用户名</div>
        <div class="flex NotInput">
          <el-input v-model="userInfo.username" :disabled="true"> </el-input>
        </div>
      </div>
    </div>

    <!-- 第三行 -->
    <div class="flex">
      <div class="left-item">
        <div class="label">已使用</div>
        <div class="flex NotInput">
          <el-input v-model="userInfo.useSpace" :disabled="true"> </el-input>
        </div>
      </div>
      <div class="right-item">
        <div class="label">总空间</div>
        <div class="flex NotInput">
          <el-input v-model="userInfo.totalSpace" :disabled="true"> </el-input>
        </div>
      </div>
    </div>
    <!-- 第四行 -->
    <el-button class="save" @click="toinfoSave">保存</el-button>
  </div>
  <!-- </div> -->

  <!-- </div> -->
</template>
  
<script>
export default {
  props: ['userInfoCopy'],

  data() {
    let checkNickname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("昵称至少1位"));
      } else if (value.length > 18) {
        callback(new Error("昵称不超过18位"));
      }
      callback();
    };



    return {
      isMan: true, //是否为男，女样式展示
      isLoading : false,

      userInfo: {
        // avatar:
        //   "https://img0.baidu.com/it/u=1968668429,2104382916&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500",
        // nickname: "ikun",
        // gender: 1,
        // email: "123@qq.com",
        // username: "hahaha",
        // useSpace: "2MB",
        // totalSpace: "10MB",
      },
      // userInfo : this.userInfo,
      userInfo: {},
      saveRules: {
        // "userInfo.username" : [{ validator: checkUsername, trigger: "blur" }],
        nickname: [{ validator: checkNickname, trigger: "blur" }],
        // email: [{ validator: checkEmail, trigger: "blur" }],
      },

    };


  },
  created() {
    this.getUserinfo()
    
    // this.initUserInfo()

  },

  methods: {
    change(value) {
      if (!value) {
        this.isMan = !this.isMan;
      }
    },
    genderMan() {
      this.userInfo.gender = 1;
    },
    genderWoman() {
      this.userInfo.gender = 2;
    },

    toinfoSave() {
      this.$refs.userInfo.validate((valid) => {
        if (valid) {
          this.infoSave();
        }
      });
    },


    // 获取用户信息
    getUserinfo() {
      // console.log("获取用户信息...")
      this.isLoading = true
      setTimeout(() => {
        this.userInfo = Object.assign({}, this.userInfoCopy),
          this.isMan = this.userInfo.gender === 1 ? true : false;
           this.isLoading = false
      }, 1000);
     

    },

    // 点击上传图片事件
    editAvatar() {
        this.$refs["userAvatar"].$refs["upload-inner"].handleClick();
    },
    
    // 超出限制
    handleExceed(files, fileList) {
      this.$message({
        message: '只能选择一张图片',
        type: 'warning',
        center: true,
        duration: 1500
      })
    },

    async uploadImage(param) {
      const formData = new FormData()
      formData.append('file ', param.file)
      let res = await this.$store.dispatch("uploadAvatar", formData);
      if (res.success) {
        this.$message({
          message: '修改头像成功',
          type: 'success',
          center: true,
          duration: 1500
        })
        setTimeout(() => {
          this.$router.go(0);
        },300)  //0.3秒
      }
      else {
        this.$message({
          message: res.msg,
          type: 'error',
          center: true,
          duration: 1500
        })
      }
      this.avatar = res.data
    },
    // 保存
    async infoSave() {
      console.log("保存...")
      let res = await this.$store.dispatch("SaveUserInfo", {
        nickName: this.userInfo.nickname,
        gender: parseInt(this.userInfo.gender)
      });
      if (!res.success) {
        this.$message({
          message: res.message,
          type: "error",
        });
      } else {
        this.$message({
          message: "保存成功",
          type: "success",
        });
      }
    }

  },
  name: "",
  components: {},
};
</script>
  
<style scoped>
#tabinfo {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: cover;
  background-color: rgb(245, 245, 245);
}

.box {
  width: 600px;

  height: 500px;
  /* background: rgba(189, 182, 182, .1); */
  background: #fff;
  margin: auto;
  border-radius: 5px;
  padding: 20px;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.item-center {
  align-items: center;
}

.left-item {
  flex: 1;
}

.right-item {
  flex: 1;
}

.square-container {
  text-align: center;
  /* width: 100px; */
  /* 正方形容器的宽度 */
  /* height: 100px; */
  /* 正方形容器的高度 */
  overflow: hidden;
  /* 超出容器部分隐藏 */
  position: relative;
  /* 使得子元素的绝对定位相对于容器 */
  /* border-radius: 50%; */
}

.square-image {
  width: 100px;
  /* 图片宽度填满容器 */
  height: 100px;
  /* 图片高度填满容器 */
  object-fit: cover;
  /* 图片按比例缩放并裁剪以填满容器 */
  object-position: center;
  /* 图片在容器中居中显示 */
}

.label {
  margin-bottom: 8px;
  margin-top: 20px;
}

.gender button {
  width: 43%;
  height: 38px;
  border: 0px;
  border-radius: 5px;
  /* 禁止选中复制 */
  user-select: none;
}

.gender button:hover {
  cursor: pointer;
}

/* 男 */
.active1 {
  background-color: rgba(213, 227, 253);
  color: rgb(50, 122, 255);
}

/* 女 */
.active2 {
  background-color: rgba(254, 228, 249);
  color: rgb(246, 118, 210);
}

.save {
  float: right;
  margin: 20px 31px 0 0;
  width: 80px;
  color: #fff;
  background: rgb(74, 180, 90);
  border: 0;
}

.save:hover {
  background: rgb(62, 153, 76);
}

/* 输入框样式 */
.custom-input>>>.el-input__inner {
  width: 90%;
  background-color: rgb(245, 245, 245);
  border: 1px solid #fff;
}

.custom-input>>>.el-input__inner:hover {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(240, 240, 240);
}

.custom-input>>>.el-input__inner:focus {
  background-color: #fff;
  border: 2px solid blue;
}

/* 不能输入类的 */
.NotInput>>>.el-input__inner {
  width: 90%;
  border: 0px;
}

.center {
  text-align: center;
}
.center >>> .vue-hover-mask_action{
  border-radius: 50%;
}
</style>